<template>
    <div>
        <el-card class="box-card" shadow="never">
            <i class="el-icon-search"></i>
            <span>筛选搜索</span>
            <el-row :gutter="10" style="margin-top:15px;">
               <el-col :span='4'>
                  <el-input v-model="realname">
                    <template slot="prepend">姓名</template>
                  </el-input>
               </el-col>
               <el-col :span="4">
                 <el-date-picker
                       style="width:100%"
                       v-model="start_date"
                       type="date"
                       value-format="yyyy-MM-dd"
                       placeholder="起始日期">
                     </el-date-picker>
                </el-col>
                <el-col :span="4">
                  <el-date-picker
                        style="width:100%"
                        v-model="end_date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="截止日期">
                      </el-date-picker>
                 </el-col>
                 <el-col :span='4'>
                    <div class="block">
                      <el-cascader
                        v-model="user_type"
                        :options="allusertype"
                        :props="props"
                        placeholder="优抚对象类别"
                        collapse-tags
                        style="width:100%"
                        clearable></el-cascader>
                    </div>
                 </el-col>
            </el-row>
            <el-row class="yx_el_row">
                <el-col>
                    <el-button type="success" plain @click="search">筛选</el-button>
                    <el-button type="primary" plain :loading="photo_loading" @click="exportPhoto">{{photo_button_name}}</el-button>
                    <el-button type="primary" plain :loading="excel_loading" @click="exportExcel">{{excel_button_name}}</el-button>
                </el-col>
            </el-row>
            <div class="yx_line"></div>
            <div style="margin-top:10px;">
              <i class="el-icon-tickets"></i>
              <span>数据列表</span>
            </div>
            <el-table class="yx_table" border :data="list" v-viewer="{movable: false}">
                <el-table-column prop="index" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="realname" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="id_card" label="身份证号" width="240">
                </el-table-column>
                <el-table-column prop="bank_no" label="银行卡号" width="180">
                </el-table-column>
                <el-table-column prop="photo" label="认证照片" width="180">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.photo" style="width: 100px;" @click="showBig">
                          <div slot="error" class="image-slot">
                             <i class="el-icon-picture-outline"></i>
                          </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="认证时间" width="180">
                </el-table-column>
                <el-table-column prop="live_rate" label="认证结果" width="100">
                </el-table-column>
                <el-table-column prop="user_type" label="优抚对象类别" width="200">
                </el-table-column>
                <el-table-column prop="extend_amount" label="抚恤金额/月">
                </el-table-column>
            </el-table>
            <Pagination :total_count="total_count" :getList="getList"></Pagination>
        </el-card>
    </div>
</template>

<script>
    import { getCheckList } from '@/api/check.js'
    import Pagination from '@/components/Pagination.vue';
    export default {
        name: 'CheckList',
        components:{ Pagination },
        inject:['reload'],
        data() {
            return {
                realname:'',
                start_date:'',
                end_date:'',
                user_type:[],
                excel_loading:false,
                excel_button_name:'导出Excel',
                photo_loading:false,
                photo_button_name:'导出照片压缩包',
                allusertype:this.$store.state.allusertype,
                allchildtype:this.$store.state.allchildtype,
                props: { multiple: true },
                list:[],
                total_count:0
            }
        },
        methods: {
            //请求列表
            getList(current_page,page_size){
                this.$store.dispatch('loadCurrentPageSize',page_size);
                var send_data={
                    current_page:current_page,
                    page_size:page_size,
                    start_date:this.start_date,
                    end_date:this.end_date,
                    realname:this.realname,
                    user_type:JSON.stringify(this.user_type)
                }
                let that=this;
                getCheckList(send_data).then(function(response){
                    if(response.data.code==1){
                        that.list=response.data.list;
                        that.total_count=response.data.total_count;
                    }
                })
            },
            search(){
               this.getList(1,this.$store.getters.getCurrentPageSize);
            },
            add(){
                this.$router.push({
                    name:'checkedit',
                    params:{id:-1,edit_type:1}
                });
            },
            edit(id,edit_type){
                this.$router.push({
                    name:'checkedit',
                    params:{id:id,edit_type:edit_type}
                });
            },
            exportPhoto(){
                this.photo_loading=true;
                this.photo_button_name='正在导出';
                var send_data={
                    current_page:1,
                    page_size:20,
                    start_date:this.start_date,
                    end_date:this.end_date,
                    realname:this.realname,
                    user_type:JSON.stringify(this.user_type),
                    is_export_photo:1
                }
                let that=this;
                getCheckList(send_data).then(function(response){
                    if(response.data.code==1){
                        let val=response.data.list;
                        if(val.length>0){
                           const { handleBatchDownload } = require('../../api/zip/photo2zip.js');
                           let photo_list=[];
                           for(let i in val){
                               photo_list.push(val[i]['photo']);
                           }
                           let date=new Date();
                           let now_date=date.getFullYear().toString()+(date.getMonth()+1).toString()+date.getDate().toString();
                           handleBatchDownload(photo_list,'活体认证图片-'+now_date+'.zip');
                        }else{
                           that.$message({
                               message:'没有可导出图片',
                               type:'warning'
                           });
                        }
                        that.photo_loading=false;
                        that.photo_button_name='导出图片压缩包';
                    }
                })
            },
            exportExcel(){
               this.excel_loading=true;
               this.excel_button_name='正在导出';
               var send_data={
                   start_date:this.start_date,
                   end_date:this.end_date,
                   current_page:1,
                   page_size:20,
                   realname:this.realname,
                   user_type:JSON.stringify(this.user_type),
                   is_export:1
               }
               let that=this;
               getCheckList(send_data).then(function(response){
                  if(response.data.code==1){
                      let val=response.data.list;
                      if(val.length>0){
                          const { export_json_to_excel } = require('../../api/excel/export2excel.js');
                          const tHeader = ["序号","姓名","身份证号","银行卡号","认证时间","认证结果","优抚对象类别","抚恤金额/月"];
                          const fields = ["index","realname","id_card","bank_no","create_time","live_rate","user_type","extend_amount"];
                          const list=val;
                          const data=that.formatJson(fields,list);
                          let date=new Date();
                          let now_date=date.getFullYear().toString()+(date.getMonth()+1).toString()+date.getDate().toString();
                          export_json_to_excel(tHeader,data,"活体认证-"+now_date);
                      }else{
                          that.$message({
                              message:'没有可导出数据',
                              type:'warning'
                          });
                      }
                      that.excel_loading=false;
                      that.excel_button_name='导出Excel';
                  }
               })
            },
            formatJson(filterVal, jsonData) {
                 return jsonData.map(v => filterVal.map(j => v[j]));
            },
            //图片放大
            showBig(){
               const viewer = this.$el.querySelector('.yx_table').$viewer
               viewer.show();
            }
        },
        created() {
            //将childtype添加到伤残人员后面
            this.allusertype[0]['children']=this.allchildtype;
            this.getList(1,this.$store.state.default_page_size);
        },
    }
</script>

<style>
    .el-image{
      hover:pointer;
      cursor: pointer;
    }
</style>
